{% extends 'mobile/base.html' %}
{% load static %}
{% block mainbody %}
    <!--头部-->
    <header class="search" id="search">
        <div class="header">
            <h1>{{ request.session.shopinfo.name }}--{{ request.session.shopinfo.shop }}</h1>
        </div>
        <!--通知公告/客服电话-->
    </header>

    <!--搜索内容-->
    <div class="search-content" id="search-content">
        <i class="icon-font"></i>
    </div>

    <!--内容区-->
    <article class="main-container">

        <!--左侧栏目-->
        <div class="sortNav" id="sortNav">
            <p class="icon-sort line">分类导航</p>
            {% for foo in categorylist %}
                <a href="javascript:void(0);" onclick="doselectList(this,{{ foo.id }})"
                        {% if cid.id == foo.id %}
                   class="select"
                        {% endif %}>
                    {{ foo.name }}
                </a>
            {% endfor %}

            {#            <a href="javascript:void(0);" onclick="doselectList(this,1)">双拼套餐</a>#}
            {#            <a href="javascript:void(0);" onclick="doselectList(this,2)" class="select">盖饭</a>#}
            {#            <a href="javascript:void(0);" onclick="doselectList(this,3)">小菜</a>#}
            {#            <a href="javascript:void(0);" onclick="doselectList(this,4)">汤/饮料</a>#}
        </div>

        <!--右侧产品-->
        <div class="sortContent line">
            <!--产品列表-->
            {% for key, plist in productlist %}
                <ol class="list-content" id="list-content{{ key }}" style="display:{% if cid.id == key %}block;{% else %}none;{% endif %}>">
                    {% for item in plist %}
                        <li class="line">
                            <a href="#">
                                <div class="pro-img"><img src="{% static 'uploads/product' %}/{{ item.cover_pic }}" alt="" width="70px" height="58px"></div>
                                <div class="pro-con">
                                    <h3>{{ item.name }}</h3>
                                    <span style="font-size: 12px;color: #ff9900">绝对超值精,店家推荐</span>
                                    <b>¥{{ item.price }}</b>
                                    <p>乐果派旗舰店</p>
                                </div>
                            </a>
                            <a href="javascript:doCartAdd({{ item.id }})" class="list-cart"><i class="icon-cartadd"></i></a>
                        </li>
                    {% endfor %}

                </ol>
            {% endfor %}

            <br><br>
        </div>

        <!--购物车-->
        <div class="cartContent fadeInBottom100" id="cartContent">

            <div class="LayerHeader line">
                <button class="Del" onclick="doCartClear()"><i class="icon-delete"></i>清空</button>
                <button class="close pl"><i class="icon-plus rot45"></i></button>
            </div>

            <div class="cartContentList">
                <ul class="line-li">
                    {#                    <li>#}
                    {#                        <img src="{% static 'uploads/member/01.jpg' %}" alt="">#}
                    {#                        <p>家乐都有机里脊肉 500g</p><span>¥150.00</span>#}
                    {#                        <div class="D-BuyNum">#}
                    {#                            <button><i class="icon-reduce"></i></button>#}
                    {#                            <input type="number" readonly class="line" value="9">#}
                    {#                            <button><i class="icon-plus"></i></button>#}
                    {#                        </div>#}
                    {#                    </li>#}
                </ul>
            </div>

            <div class="LayerFooter">
                共计：<span>¥0.00</span>
            </div>
        </div>

    </article>

    <!--底部栏目-->
    <menu>
        <a href="{% url 'mobile_shop' %}"><i class="icon-selectmore"></i>切换店铺</a>
        <!--a href="member-order.html"><i class="icon-allorders"></i>订单</a-->
        <a href="javascript:void(0)" id="orderCart"><i class="icon-cart"><span>0</span></i>购物车</a>
        <a href="{% url 'mobile_member_index' %}"><i class="icon-head"></i>我的</a>
        <a>
            <button class="settlement" onclick="location.href='{% url 'mobile_add_orders' %}'">去结算</button>
        </a>
    </menu>

    <!--弹出圈圈loading-->
    <div class="spinner" style="display:none;"><i></i></div>
{% endblock %}

{% block myjs %}
    <script type="text/javascript">
        // 获取按钮元素
        let settlement = document.querySelector(".settlement");

        // 设置按钮为禁用状态
        settlement.disabled = true;

        function doselectList(ob, m) {
            $("#sortNav a").removeClass("select");
            $(ob).addClass("select");
            $("ol.list-content").hide();
            $("#list-content" + m).show();
            return false;
        }

        // 执行购物车的添加
        function doCartAdd(id) {
            $.ajax({
                url: '{% url 'mobile_cart_add' %}?pid=' + id,
                type: 'get',
                data: {},
                dataType: 'json',
                success: function (res) {
                    console.log(res.cartlist);
                    if (res) {
                        // 成功返回数据 说明加入购物车了 打开
                        settlement.disabled = false;
                    }
                    doShowCart(res.cartlist);
                }
            })
        }

        function doCartClear() {
            $.ajax({
                url: '{% url 'mobile_cart_clear' %}',
                type: 'get',
                data: {},
                dataType: 'json',
                success: function (res) {
                    console.log(res.cartlist);
                    // 清空返回了没有数据 说明购物车是空的 关闭
                    settlement.disabled = true;
                    doShowCart(res.cartlist);
                }
            })
        }


        //重新绘制购物车内容
        function doShowCart(cartlist) {
            var cartContent = $("#cartContent div.cartContentList ul.line-li");
            cartContent.empty()
            var total = 0.0;
            for (let i in cartlist) {
                var str = "<li>";
                {#str += '<img src="/static/uploads/product/' + cartlist[i].cover_pic + '" alt=""><p>' + cartlist[i].name + '</p><span>¥' + cartlist[i].price + '</span>';#}
                {#str += '<div class="D-BuyNum"><button><i class="icon-reduce"></i></button><input type="number" readonly class="line" value="' + cartlist[i].num + '"><button><i class="icon-plus"></i></button></div>'#}
                str += `<img src="{% static 'uploads/product' %}/${cartlist[i].cover_pic}" alt=""><p>${cartlist[i].name}</p><span>¥${cartlist[i].price}</span>`;
                str += `<div class="D-BuyNum"><button><i class="icon-reduce"></i></button><input type="number" readonly class="line" value="${cartlist[i].num}"><button><i class="icon-plus"></i></button></div>`
                str += "</li>";
                cartContent.append(str);
                total += cartlist[i].price * cartlist[i].num;
            }
            $("#cartContent div.LayerFooter span").html("￥" + total);
            $("#orderCart i.icon-cart span").html(Object.keys(cartlist).length);
        }

        // 当前页面首次加载时获取购物车信息并显示【首次
        $.ajax({
            url: "{% url 'mobile_cart_add' %}",
            type: 'get',
            data: {},
            dataType: 'json',
            success: function (res) {
                console.log(res.cartlist);
                doShowCart(res.cartlist);
            }
        });
    </script>
{% endblock %}
